<!DOCTYPE html>
<html lang='cmn'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi~sa~ki</title>

    <meta content='Free, do whatever you want, hi-resolution photos' property='og:description'>
    {% load staticfiles %}
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/custom.css" %}" rel="stylesheet">
    <link href="{% static "css/wangEditor.min.css" %}" rel="stylesheet"/>

</head>
<body>
<div id='resplashed'>

    <div class='top-bar'>
        <div id="nav_trigger_parent" class='container'>
            <a class='message' href="/">Misaki</a>
            <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
        </div>
    </div>

    <div class="nav">
        <div class="nav-phone">
            <ul class="nav-list">
                {% if user.username %}
                    <li class=" nav-login-icon"><a class="nav-link" href="/user/{{ user.username }}"><img class="nav-user-icon" src="/media/{{ user.icon }}"><a class="nav-link" href="/user/{{ user.username }}">{{ user.name }}</a></a></li>
                {% else %}
                    <li class="nav-item nav-login" ><a class="nav-link" href="/login">登录</a></li>
                {% endif %}
                <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="/type">分类</a></li>
                <li class="nav-item"><a class="nav-link" href="/discover">发现</a></li>
                <li class="nav-item"><a class="nav-link" href="/leave">留言</a></li>

            </ul>
        </div>
    </div>


    <div class="container publish-box">
        <input type="text" id="publish-title" class="publish-title" value="请输入标题"
               onfocus="if(this.value=='请输入标题') this.value = ''">
        <div id="publish-input" class="publish-input">
            <p>请输入内容...</p>
        </div>
        <div class="commit edit-submit" style="line-height: 35px;float: right">
            提交
        </div>
        <div class="tag-container">
            {% for type in types %}
                <div id="tag-{{ type.id }}" class="type-submit" style="line-height: 30px" onclick="clickTag({{ type.id }})">
                    {{ type.name }}
                </div>
            {% endfor %}
        </div>
    </div>


</div>
{% load staticfiles %}
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/wangEditor.min.js' %}"></script>
<script type="text/javascript">
    (function () {
        $('.nav__trigger').on('click', function (e) {
            e.preventDefault();
            $('.nav').toggleClass('nav-active-x');
            $('#nav_trigger_parent').toggleClass('nav-trigger-active')
        });

    }())
    var tags = Array()
    Array.prototype.contains = function(obj){
        for ( i in this){
            if (this[i] == obj) return i;
        }
        return -1;
    }

    function clickTag(tagId){
        index = tags.contains(tagId)
        if(index == -1){
            $('#tag-'+tagId).addClass('type-submit-active')
            tags.push(tagId)
        }else{
            $('#tag-'+tagId).removeClass('type-submit-active')
            tags.splice(index,1)
        }
    }


    var editor = new wangEditor('publish-input');
    editor.config.menus =  [
        'bold', 'forecolor', 'bgcolor', 'quote', 'fontfamily', 'fontsize', 'head',
        'alignleft', 'aligncenter', 'alignright', 'link', 'emotion', 'img',
        'video', 'undo', 'fullscreen'
    ]
    editor.config.uploadImgUrl = '/artice/uploadImage ';
    editor.config.uploadImgFileName = 'image'
    editor.config.uploadParams = {
        token: 'abcdefg',
        user: 'wangfupeng1988'
    };

    editor.config.uploadHeaders = {
        'Accept': 'text/x-json'
    };

    editor.config.hideLinkImg = true;
    editor.create();

    $('.commit').on('click', function (e) {
        e.preventDefault();
        var tag_list = tags;
        var title = $('#publish-title').val();
        var content = editor.$txt.html();
        $.ajax({
            url: '/article/create',
            type: 'POST',
            async: true,
            data: {
                'title': title,
                'content': content,
                'tags':tag_list
            },
            success: function (data, status, xhr) {
                window.location.href = data;
            },
            error: function (xhr, status) {
                console.log(status + 'Error');
            }
        })
    })
</script>
<script type="text/javascript">
    if (window !== top) top.location = window.location;
</script>
</body>
</html>